웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > angularjs

[AngularJS] 파일 변경시 자동 리로드되는 끄는 방법, 자동 리로드 해제

Last Modified : 2020-03-29 / Created : 2020-02-17
3,355
View Count
AngularJS 앱을 로컬 개발 환경에서 실행하는 경우 ng 스크립트에서 자동으로 파일이 변경되면 리로드하도록 기본값이 설정됩니다. auro reload가 되는데요 ~ 만약 자동 리로드를 끄려면 어떻게 해야 하는지 알아봅니다.




# AngularJS 로컬 개발시 자동 리로드 비활성화 하기

방법은 간단합니다. 로컬 웹서버를 ng server로 띄울 때 옵션을 변경하면 되죠. 이때 사용할 옵션이 바로 --live-reload입니다.

--live-reload false
또는
--no-live-reload


이제 스크립트를 변경해야 합니다. 먼저 앱에서 package.json 파일을 열어 살펴보면 스크립트 목록에 아래와 같이 run 스크립트가 존재합니다.
"scripts": {
  "start": "ng serve",
  ...
}

이제 위의 ng serve 다음에 아래처럼 옵션 값을 추가합니다.
"scripts": {
  "start": "ng serve --live-reload=false",
  ...
}

이제 스크립트를 재실행해봅니다. 그럼 --no-live-reload 옵션이 함께 설정되어 ng 로컬 실행시 자동 리로드가 실행되지 않습니다. 즉 파일이 변경되어도 바로 브라우저의 뷰가 바뀌지 않게되죠.

이제 파일이 바뀐 후의 화면을 보려면 자동이 아닌 수동으로 F5를 누르거나 하여 직접 refresh를 해야합니다.

여기까지 ng server의 자동리로드를 비활성화하는 방법입니다. 만약 자동으로 바뀌게 하고 싶다면? 반대로 true를 사용할 수 있겠죠.
"scripts": {
  "start": "ng serve --live-reload=true",
  ...
}

아래의 글도 찾고 계시지 않나요?

    Previous

    angular cli는 무엇이고 설치 및 사용방법